<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            background: #f4f4f4;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        
        section{/*
            border: 1px solid red;*/
            border-top-left-radius:  .3623rem;
            border-top-right-radius:  .3623rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;/**/
            position: relative;
        }
        
        section ul:first-child{
            margin-top: .4831rem;
        }
        section .ul{
            /*
            border: 1px solid green;*/
            overflow: hidden;
            width: 90%;
            margin: .2415rem 0;
            font-size: .4348rem;
        }
        section .ul li{
            /*
            border: 1px solid red;*/
            width: 100%;
            height: 1.087rem;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            border-bottom: .0121rem solid rgba(142, 142, 142, 0.296);
            overflow: hidden;
            color: #404040;
        }
        
        section .ul li span{
            /*
            border: 1px solid red;*/
            text-align: right;
            display: inline-block;
            width: 2.657rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            font-size: .4348rem;
        }
        section .ul li input{
            /**/
            border: none;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            outline: none;
            box-sizing: border-box;
            padding: 0 .2415rem;
            font-size: .4348rem;
            background: none;
        }
        section .ul2 li.t1{
            box-sizing: border-box;
            padding: 0 .2415rem;
            font-size: .3623rem;
            color: #878787;
        }
        .ul2 li:nth-child(2) {
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: none;
            margin: .4831rem 0;
        }
        .ul2 li:nth-child(1){
            border: none;
        }
        button{
            width: 4.8309rem;
            height: .9662rem;
            border-radius: .1208rem;
            margin: .2415rem 0;
            font-size: .4106rem;
            letter-spacing: .0242rem;
            color: #fff;
        }
        button.yes{
            border: none;
            background: #2493f1;
        }
        button.cancel{
            background: #f6f6f6;
            color: #ff5151;
            border: .0483rem solid #ff5151;
        }
        
        





        /*弹窗样式*/
        #alert {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .window {
            border-radius: .2415rem;
            font-size: .4348rem;
            color: #2c2c2c;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*
            box-sizing: border-box;
            padding: .4831rem .9662rem;*/
            background-color: #ffffff;
            overflow: hidden;
        }

        .window .alt_title {
            /*
            border: 1px solid red;*/
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 1.087rem;
            font-weight: 600;

        }

        .window .alt_body {
            /*
            border: 1px solid red;*/
            width: 100%;
            /**/
            min-height: 1.9324rem;
            box-sizing: border-box;
            padding: .3623rem .4831rem .4831rem .4831rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .4106rem;
        }

        .window .action1 {
            /**/
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
            display: flex;
            flex-direction: row;

        }

        .window .action1 div {
            width: 50%;
            height: 1.2077rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb4c4c;
        }

        .window .action2 {
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
        }

        .window .action2 div {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1.2077rem;
            color: #4c97fb;
        }

        .window .action1 div:nth-child(1) {
            border-right: .0121rem solid rgb(207, 207, 207);
        }

        .window .action1 div:nth-child(2) {
            color: #4c97fb;
            border-left: .0121rem solid rgb(207, 207, 207);
        }

        









        


        
    </style>
    <link rel="stylesheet" href="../../../css/header.css">
    <script src="../../../lib/vue.js"></script>
    
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">登录密码</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
            <ul class="ul ul1">
                <li>
                    <span>旧密码</span><input type="text" @input="checkInput()" v-model="oldPwd1" :placeholder="'请填写旧密码：'+oldPwd">
                </li>
                <li>
                    <span>新密码</span><input type="password" @input="checkInput()" v-model="newPwd1" placeholder="请输入新密码">
                </li>
                <li>
                    <span>确认密码</span><input type="password" @input="checkInput()" v-model="newPwd2" placeholder="再次确认新密码">
                </li>
            </ul>
            <ul class="ul ul2">
                <li class="t1">
                    设置密码后可通过学号/手机号/邮箱+密码登录信管帮
                </li>
                <li v-show="isBtnShow">
                    <button type="button" @click="yes1()" class="yes">确定</button>
                    <button type="button" @click="cancel1()" class="cancel">取消</button>
                </li>
                
            </ul>
            






            <!-- 弹窗 -->
        <div id="alert" v-show="alertShow">
            <div class="window">
                <div class="alt_title">{{alt_title}}</div>
                <div class="alt_body">{{alt_body}}</div>
                <div class="action action1" v-show="action1Show">
                    <div class="cancel" @click="cancel()">取消</div>
                    <div class="do" @click="yes()">确定</div>
                </div>
                <div class="action action2" v-show="!action1Show">
                    <div class="cancel" @click="cancel()">确定</div>
                </div>
            </div>
        </div>

        
    </section>


    

    
    
    

    <script>
        new Vue({
            el: "section",
            data: {
                oldPwd: "",
                oldPwd1: "",
                newPwd1: "",
                newPwd2: "",
                isBtnShow: false,
                alertShow: false,
                action1Show: false,
                alt_title: "提示",
                alt_body: "",
                code: -1
                
            },
            methods: {
                checkInput(){
                    if(this.oldPwd1 !== '' && this.newPwd1 !== '' && this.newPwd2 !== ''){
                        this.isBtnShow = true
                    }else{
                        this.isBtnShow = false
                    }
                },
                yes1(){
                    if(this.oldPwd1 !== '' && this.newPwd1 !== '' && this.newPwd2 !== ''){
                        if(this.newPwd1 !== this.newPwd2){
                            this.alertShow = true
                            this.alt_body = '两次输入的新密码不一致，请重新填写。'
                        }else{
                            let userInfo = localStorage.getItem('XGB-user')
                            let id = JSON.parse(userInfo).id
                            fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/edit_information/edit_userPassword?id=${id}&oldPwd=${this.oldPwd1}&newPwd=${this.newPwd1}`)
                            .then(res=>res.json())
                            .then(res=>{
                                this.code = res.code
                                if(res.code === -1){
                                    this.alertShow = true
                                    this.alt_body = res.res
                                    
                                }else if(res.code === 0){
                                    this.alertShow = true
                                    this.alt_body = res.res
                                    
                                }
                            })
                        }
                    }else{
                        this.alertShow = true
                        this.alt_body = '请填写完所有表单项'
                    }
                },
                cancel1(){
                    this.oldPwd1 = "",
                    this.newPwd1 = "",
                    this.newPwd2 = "",
                    this.isBtnShow = false
                },
                cancel() {
                    if(this.code !== 0){
                        this.alertShow = false
                    }else{
                        this.alertShow = false
                        window.location.replace('../../login/login.html')
                    }
                    
                },
                yes() {
                    console.log("用户点击 “确定”")
                }
            },
            mounted() {
                let userInfo = localStorage.getItem('XGB-user')
                let id = JSON.parse(userInfo).id
                /**/
                fetch(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/edit_information/edit_userPassword?id=${id}`)
                .then(res=>res.json())
                .then(res=>{
                    this.oldPwd = res.res
                })
            }
        })


        
        



    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>